<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% load staticfiles %}
    <!--引入JQuery-->
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery-3.2.1.min.js' %}"></script> 
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.easyui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.min.js' %}"></script>       
    <script type="text/javascript" src="{% static 'website/js/common.js' %}"></script>    
    <script type="text/javascript" src="{% static 'website/jquery-easyui/locale/easyui-lang-zh_CN.js' %}"></script> 
    <link rel="stylesheet" type="text/css" href="{% static  'website/jquery-easyui/themes/default/easyui.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/themes/icon.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/demo/demo.css' %}">
 
    <style>
        xmp {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>

    <script>
        function onLoadSuccess(data) {
            // 修改“操作”列的按钮样式
            $('.deleteRowBtn').linkbutton({text:'删除', plain:true, iconCls:'icon-remove'});

            // 设置自动调整行高(主要是解决行号所在单元格和数据行错位问题)
            $('#API_test_report_for_case_step').datagrid('fixRowHeight');
        }

        // 加载之前修改url值，以保持页面数据和用例的对应关系
        function onBeforeLoad(param){
            // 获取当前页面所在父页面(tab页)的ID
            var currentTab = window.parent.$('#tabs').tabs('getSelected');
            var tabID = currentTab.panel('options').id;
            $('#API_test_report_for_case_step').datagrid('options').url = '/action/loadTestReportCaseSteps?reportType=APITestReport&tabID=' + tabID;
        }


        // 格式化【操作】列
        function formatOtherOperationColumn(value,row,index){
            var btn = "<a id='deleteRowBtn" + index + "' class='deleteRowBtn' onclick='removeRow(\"API_test_report_for_case_step\"," + row.id +"," + index+")' href='javascript:void(0)'>删除</a>"; 
            return btn;
        }


        // 单元格样式设置
        function cellStyler(value, row, index){
            if (row['run_result'] == '失败') {
                return 'background-color:red;';
            } else if (row['run_result'] == '阻塞') {
                return 'background-color:#ffee00;';
            }
        } 
        // 设置单元格样式，控制英文换行//必须设置 nowrap: false 才起作用
        function setCellStyle(){ 
            return "word-break:break-all;word-wrap:break-word";
        }

    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'center'" title="">
        <div class="easyui-tabs"  id="tabs" data-options="fit:true, border:false, plain:true">
            <div title="步骤执行明细">
            <table class="easyui-datagrid" rownumbers="true" pagination="true" id="API_test_report_for_case_step"  data-options="border:false,
                singleSelect:false,
                fit:true,
                fitColumns:false,
                nowrap: false,
                collapsible: true,
                toolbar: toolbar, 
                rownumbers: true,
                pageSize: 25,    
                pageList: [25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100],          
                url: '',
                method: 'get',  
                onBeforeLoad:onBeforeLoad,
                onLoadSuccess:onLoadSuccess"> 
                 <thead>
                    <tr>
                        <th data-options="field:'ck',checkbox:true"></th>
                        <th data-options="field:'id', align: 'center', fitColumns:true">ID</th>
                        <th data-options="field:'execution_num', align: 'center'" width="100px">执行编号</th>
                        <th data-options="field:'plan_id', align: 'center', fitColumns:true, hidden:true">计划ID</th>
                        <th data-options="field:'case_id', align: 'center', fitColumns:true, hidden:true">用例ID</th>
                        <th data-options="field:'step_id', align: 'center', fitColumns:true">步骤ID</th>
                        <th data-options="field:'order', align: 'left', fitColumns:true">步序</th> 
                        <th data-options="field:'step_type', align: 'left'" width="70px">步骤类型</th>
                        <th data-options="field:'op_object', align: 'left'" width="150px">操作对象</th>
                        <th data-options="field:'object_id', align: 'center', fitColumns:true">对象ID</th>
                        <th data-options="field:'exec_operation', align: 'left', halign:'center'" width="160px">执行操作</th>
                        <th data-options="field:'protocol', align: 'center'" width="50px">协议</th>
                        <th data-options="field:'host', align: 'left',halign:'center'" width="150px">主机地址</th>
                        <th data-options="field:'port', align: 'center'" width="60px">端口</th>
                        <th data-options="field:'request_header', align: 'left', styler:setCellStyle, halign:'center'" width="200px">请求头</th>
                        <th data-options="field:'request_method', align: 'center'" width="65px">请求方法</th>
                        <th data-options="field:'url_or_sql', align: 'left', styler:setCellStyle,halign:'center'" width="350px">URL/SQL</th>
                        <th data-options="field:'input_params', align: 'left', editor:{type:'textarea'}, styler:setCellStyle,halign:'center'" width="420px">输入参数</th>
                        <th data-options="field:'response_to_check', align: 'center'" width="70px">检查响应</th>
                        <th data-options="field:'check_rule', align: 'left', halign:'center'" width="125px">校验规则</th>
                        <th data-options="field:'check_pattern', align: 'left', styler:setCellStyle, halign:'center'" width="400px">校验模式</th>
                        <th data-options="field:'output_params', align: 'left', styler:setCellStyle,halign:'center'" width="400px">输出</th>
                        <th data-options="field:'run_result', align: 'center', styler:cellStyler" width="60px">运行结果</th>
                        <th data-options="field:'remark', align: 'center', styler:setCellStyle" width="250px">原因备注</th>
                        <th data-options="field:'run_time', align: 'center'" width="160px">开始运行时间</th>
                        <th data-options="field:'operations', title:'操作', align: 'center',
                            formatter:function(value,row,index){return formatOtherOperationColumn(value,row,index);}"  
                            width="70px">操作</th>   
                    </tr>
                </thead> 
            </table>

    <!--增加工具条-->
   <script type="text/javascript">
       var toolbar = addToolbar('API_test_report_for_case_step','test_report_view'); 
   </script>   
        </div>
    </div>
</body>
</html>